<template>
  <div class="content">
    <div class="cloud-header">
      <h2>应用管理</h2>
    </div>
    <div class="cloud-body">
      <div class="cloud-subset-title">
        <div class="cloud-subset-action">
        </div>
        <p class="cloud-subset-tips">后台菜单管理，控制整个后台的菜单显示与隐藏，需要配合cloud-vu使用，menus表属于系统自带表，必须使用menus方法进行操作，不支持直接操作menus数据<br></p>
      </div>
      <div class="cloud-menus-body">
        <div class="tree-show-header">
          <div class="tree-header-title">名称</div>
          <div class="tree-show-info">
            <ul>
              <li>标识</li>
              <li>图标</li>
              <li>类型</li>
              <li>显示</li>
            </ul>
          </div>
          <div class="tree-header-tools"></div>
        </div>
        <Tree :option="param" ref="menus" selectOnClick className="h-tree-theme-row-selected" :expandAll="true">
          <template slot="item" slot-scope="{item}">
            <div class="tree-show-custom">
              <div v-if="item.editing || item.adding">
                <input class="tree-show-input" type="text" v-model="item.title">
              </div>
              <span class="tree-show-title" v-else>{{item.title}}</span>
              <div class="tree-show-info">
                <ul>
                  <li>
                    <input class="tree-show-input" v-model="item.name" type="text" v-if="item.adding">
                    <span v-else>{{item.name}}</span>
                  </li>
                  <li>
                    <input class="tree-show-input" v-model="item.icon" type="text" v-if="item.editing || item.adding">
                    <span v-else>{{item.icon || "-"}}</span>
                  </li>
                  <li>{{item.type || "PAGE"}}</li>
                  <li>
                    <h-switch v-model="item.show" :small="true" :disabled="item.name =='admin'"></h-switch>
                  </li>
                </ul>
              </div>

              <span class="tree-edit-part" v-if="item.adding">
                <i class="h-icon-check" @click="affirm(item)"></i>
              </span>
              <span class="tree-edit-part" v-if="item.editing">
                <i class="h-icon-check" @click="update(item)"></i>
              </span>
              <span class="tree-edit-part" v-if="!item.editing && !item.adding">
                <i class="h-icon-plus" @click.stop="append(item)"></i>
                <i v-if="item.name !=='admin'" class="h-icon-edit" @click.stop="edit(item)"></i>
                <i v-if="item.name !=='admin'" class="h-icon-trash" @click.stop="remove(item)"></i>
              </span>
            </div>
          </template>
        </Tree>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      param: {
        keyName: 'menuId',
        parentName: 'parentId',
        titleName: 'title',
        dataMode: 'list',
        getTotalDatas: (resolve) => {
          this.initialize(resolve);
        }
      }
    };
  },

  mounted() {
    this.$refs.menus.expandAll();
  },
  methods: {
    /**
     * 初始化数据
     * @return {[type]} [description]
     */
    initialize(resolve) {
      let list = [
        { menuId: 0, title: '操作后台', icon: '', show: true, type: 'PATH', name: 'admin' }
      ];
      this.$cloud.menus().all().then(data => {
        data = list.concat(data);
        resolve(data);
        this.$refs.menus.expandAll();
      });
    },
    /**
     * 确认
     * @return {[type]} [description]
     */
    async affirm(item) {
      try {
        if (item.name == '') {
          this.$Message('标识符不能为空');
          return;
        }
        if (item.title == '') {
          this.$Message('标题不能为空');
          return;
        }
        let data = await this.$cloud.menus().check(item.name).then(data => {
          console.log('res', data);
          return data;
        });
        if (data) {
          this.$Message('抱歉标识符已经存在，不能重名');
          this.$refs.menus.removeTreeItem(item.menuId);
          return;
        } else {
          let data = await this.$cloud.menus().add(item).then(async data => {
            // 修改父级类型
            if (item.parentId !== 0) {
              let parent = await this.$cloud.menus().get(item.parentId).then(data => {
                return data;
              });
              // 判断如果类型为PAGE责修改为PATH
              if (parent.type == 'PAGE') {
                await this.$cloud.menus().edit(item.parentId, { type: 'PATH' }).then(data => {
                  this.$refs.menus.updateTreeItem(item.parentId, { type: 'PATH' });
                  return data;
                });
              }
            }
            // 返回新的ID
            return data.menuId;
          });
          this.$set(item, 'menuId', data);
          this.$set(item, 'adding', false);
        }
      } catch (error) {
        console.log('提交报错', error);
        this.$Message(error.msg);
      }
    },
    edit(item) {
      this.$set(item, 'adding', false);
      this.$set(item, 'editing', true);
    },
    async update(item) {
      console.log('修改数据u', item);
      await this.$cloud.menus().edit(item.menuId, { title: item.title, icon: item.icon }).then(data => {
        this.$refs.menus.updateTreeItem(item.menuId, { title: item.title, icon: item.icon });
        this.$Message('修改成功');
        this.$set(item, 'adding', false);
        this.$set(item, 'editing', false);
        return data;
      });
    },
    append(item) {
      let parentId = 0;
      if (item.name !== 'admin') {
        parentId = item.menuId || 0;
      }
      this.$refs.menus.appendTreeItem(item.menuId, { title: '', name: '', icon: '', show: true, type: 'PAGE', editing: false, adding: true, parentId: parentId });
    },
    remove(item) {
      this.$refs.menus.removeTreeItem(item.menuId);
    }
  }
};

</script>
<style lang="less">
.cloud-menus-body {
  margin: 0 15px;
  border: 1px solid #e7e7eb !important;
  border-bottom: 0px solid #e7e7eb !important;
  clear: both;

  .h-tree-theme-row-selected .h-tree-show {
    border-bottom: 1px solid #e7e7eb !important;
  }

  .tree-show-header {
    position: relative;
    width: 100%;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #e7e7eb;
    background-color: #f5f5f5;
  }

  .tree-show-input {
    width: 95%;
    height: 27px;
  }

  .tree-header-title {
    width: calc(100% - 50% - 80px);
    height: 48px;
    line-height: 48px;
    position: absolute;
    text-align: center;
  }

  .tree-header-tools {
    width: 80px;
    position: absolute;
    right: 10px;
    height: 48px;
    line-height: 48px;
    text-align: center;
  }

  .tree-show-info {
    position: absolute;
    right: 80px;
    width: 50%;
    top: 0px;

    ul {
      list-style-type: none;
    }

    li {
      display: block;
      float: left;
      width: 25%;
      line-height: 48px;
      border-right: 1px solid #e7e7eb;
      text-align: center;

      &:first-child {
        border-left: 1px solid #e7e7eb;
      }
    }
  }

  .h-tree-show {
    padding: 0;
    height: 48px;
    line-height: 48px;

    .h-tree-show-desc {
      display: none;
    }

    .tree-show-custom {
      display: inline;

      .tree-show-info {
        input {
          margin: 5px 0 0 1px;
        }
      }

      input {

        margin: 5px 0 0 -9px;
      }

      .tree-show-title {
        font-size: 13px;
      }
    }

    .tree-edit-part {
      position: absolute;
      right: 5px;
      top: 0px;
      opacity: 0;
      text-align: center;

      i {
        font-size: 12px;
        vertical-align: middle;
        margin-right: 10px;
        cursor: pointer;

        &:hover {
          color: @primary-color;
        }

      }

    }

    &:hover {
      .tree-edit-part {
        opacity: 1;
      }
    }
  }
}

</style>
